/* * @index.vue * @description 首页 * @author lxj * @update (lxj 2023/11/30) */
<template>
  <div class="index-conntainer">
    <!--    返回结果 -->
    <div class="content">
      <!--   关键词基本信息展示   -->
      <el-card
        class="card"
        shadow="hover"
        style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
      >
        <template #header>
          <h3 class="title">{{ seed_word }}</h3>
        </template>
        <!--        种子关键词详细信息-->
        <!--        <div class="count-box">-->
        <!--        </div>-->
      </el-card>
      <!--关键词标签页展示-->
      <el-card class="list">
        <a-tabs v-model:activeKey="activeKey">
          <a-tab-pane key="1" tab="关键词趋势分析">
            <ShowChart></ShowChart>
          </a-tab-pane>

          <a-tab-pane key="2" tab="竞争词列表">
            <WordList :list="JSON.stringify(comp_list)"></WordList>
          </a-tab-pane>

          <a-tab-pane key="3" tab="人群画像" force-render>
            <CompAnalysis></CompAnalysis>
          </a-tab-pane>
          <template #renderTabBar="{ DefaultTabBar, ...props }">
            <component :is="DefaultTabBar" v-bind="props" :style="{ opacity: 0.5 }" />
          </template>
        </a-tabs>
      </el-card>
    </div>
  </div>
</template>

<script setup>
  import { ref, computed, reactive, onBeforeMount } from 'vue';
  import { CountTo } from 'vue3-count-to';
  import WordList from '@/components/WordList/index.vue';
  import { useI18n } from 'vue-i18n';
  import { getResouceList } from '@/api/index';

  import { useStore } from 'vuex';
  import { useRoute } from 'vue-router';

  const store = useStore();
  const route = useRoute();
  const { t } = useI18n();

  const seed_word = ref();
  const comp_list = ref();

  const result = JSON.parse(route.params.result);
  seed_word.value = result['seedword'];
  comp_list.value = result['compkeys'];
  console.log(typeof comp_list.value);

  const state = reactive({
    list: [],
    prefix: '',
    orderList: [],
    skillList: [],
  });
  const activeKey = ref('1');

  const hour = new Date().getHours();
  const thisTime =
    hour < 8
      ? t('sayHi.early')
      : hour <= 11
      ? t('sayHi.morning')
      : hour <= 13
      ? t('sayHi.noon')
      : hour < 18
      ? t('sayHi.afternoon')
      : t('sayHi.evening');
  const sayHi = ref(thisTime);
  const avatar = ref('https://i.gtimg.cn/club/item/face/img/2/15922_100.gif');

  const series2 = reactive([
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true,
    },
  ]);

  const xAxis = reactive({
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  });

  const yAxis = reactive({
    type: 'value',
  });

  const toolbox = reactive({
    show: true,
  });

  const isMobile = computed(() => {
    return store.getters['setting/isMobile'];
  });

  const onGetResouceList = () => {
    getResouceList().then((res) => {
      const { list, prefix, orderList, skillList } = res.data;
      Object.assign(state, { list, prefix, orderList, skillList });
    });
  };

  const handleToDetail = (url) => {
    window.open(url);
  };

  onBeforeMount(() => {
    onGetResouceList();
  });
</script>

<style lang="scss" scoped>
  .index-conntainer {
    width: $base-width;
    .head-card {
      display: flex;
      align-items: center;
      padding: $base-main-padding;
      background-color: $base-color-white;
      &-content {
        padding-left: 15px;
        .desc {
          color: $base-font-color;
        }
      }
    }
    .content {
      margin: auto;
      align-content: center;
      width: 70%;
      //margin: 15px 0;
      //padding-right: 50px;
      //padding-left: 50px;
      .count-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .item {
          display: flex;
          flex-direction: column;
          text-align: center;
          .label {
            padding: 10px 0;
            font-size: $base-font-size-big;
          }
          .count {
            font-size: $base-font-size-max;
            font-weight: bolder;
            color: $base-color-primary;
            &.error {
              color: var(--el-color-danger);
            }
            &.success {
              color: var(--el-color-success);
            }
          }
        }
      }
      .title {
        margin: 0;
      }
      .skill-title {
        padding: 10px 0;
        font-weight: 500;
      }
      .card {
        margin-bottom: 15px;
        &-body {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          &.mobile {
            grid-template-columns: repeat(1, 1fr);
          }
          .item {
            box-sizing: border-box;
            padding: 10px 20px;
            margin-top: -1px;
            margin-left: -1px;
            overflow: hidden;
            cursor: pointer;
            border: 1px solid black;
            border: 1px solid #eee;
            transition: box-shadow 0.5;
            .lf {
              display: flex;
              align-items: center;
              max-width: 140px;
              .img {
                width: auto;
                max-width: 120px;
                height: auto;
                max-height: 40px;
              }
            }
            &:hover {
              box-shadow: $base-box-shadow;
            }
            .title {
              padding-left: 5px;
              font-size: 18px;
              font-weight: bold;
            }
            .desc {
              padding: 5px 0;
              font-size: 13px;
              line-height: 1.5;
              color: $base-font-color;
            }
          }
        }
      }
    }
  }
  //.list {
  //  height: 500px;
  //}
</style>
